<!-- 修改密码 -->
<template>
  <el-dialog :model-value="dialogVisible" title="修改密码" @close="handleClose">
    <el-form ref="formRef" :model="formData" :rules="formRules">
      <el-form-item
        label="原密码"
        prop="oldPassword"
        :label-width="formLabelWidth"
      >
        <el-input
          v-model="formData.oldPassword"
          type="password"
          show-password
          clearable
        />
      </el-form-item>
      <el-form-item
        label="新密码"
        prop="password"
        :label-width="formLabelWidth"
      >
        <el-input
          v-model="formData.password"
          type="password"
          show-password
          clearable
        />
      </el-form-item>
      <el-form-item
        label="确认密码"
        prop="checkPass"
        :label-width="formLabelWidth"
      >
        <el-input
          v-model="formData.checkPass"
          type="password"
          show-password
          clearable
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="submitForm(formRef)">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
defineOptions({
  name: "Psw",
  inheritAttrs: false,
});
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["close"]);

import { reactive, ref, watch } from "vue";
import { ElMessage } from "element-plus";
import UserAPI from "@/api/user";
import md5 from "js-md5";

const formRef = ref(null);
const formData = reactive({
  oldPassword: "",
  password: "",
  checkPass: "",
});

const formLabelWidth = "140px";
const validatePass = (rule, value, callback) => {
  if (!value) {
    callback(new Error("请输入新密码"));
  } else {
    if (formData.checkPass !== "") {
      if (!formRef.value) return;
      formRef.value.validateField("checkPass", () => null);
    }
    callback();
  }
};
const validatePass2 = (rule, value, callback) => {
  if (!value) {
    callback(new Error("请确认新密码"));
  } else if (value !== formData.password) {
    callback(new Error("两次密码不一致!"));
  } else {
    callback();
  }
};
const formRules = {
  oldPassword: [{ required: true, message: "请输入原密码" }],
  password: [{ required: true, validator: validatePass, trigger: "blur" }],
  checkPass: [{ required: true, validator: validatePass2, trigger: "blur" }],
};

const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      console.log(formData, "submit!");
      try {
        const res = await UserAPI.check4psw({
          password: md5(formData.oldPassword),
        });
        // 原密码校验成功
        if (res.data) {
          const res = await UserAPI.updatePsw({
            password: md5(formData.password),
          });
          if (res.code === 200) {
            ElMessage.success(res.info);
          }
        } else {
          ElMessage.error("原密码错误");
        }
      } catch (error) {
        ElMessage.error(error);
      }
    } else {
      console.log("error submit!");
      return false;
    }
  });
};

const handleClose = () => {
  emit('close')
};
</script>
